$(function () {
    /*优化代码点1,选择器选择的dom对象统一用变量抽取出来*/
    var roleDatagrid = $("#role_datagrid");
    var editAndDelBtn = $("#role_datagrid_edit,#role_datagrid_del");
    var roleDialog = $("#role_dialog");
    var roleForm = $("#role_form");
    var keyWord = $("[name='keyWord']");
    var roleFormId = $("#role_form [name='id']");

    var allPermission = $("#allPermission");
    var selfPermission = $("#selfPermission");
    var roleIdNameSn=$("[name='id'],[name='name'],[name='sn']")
    roleDatagrid.datagrid({
        fit: true,
        rownumbers: true,
        pagination: true,
        fitColumns: true,
        toolbar: "#role_datagrid_tb",
        url: '/role_list',
        pageList: [1, 10, 20, 50],
        singleSelect: true,
        columns: [[
            {field: "sn", title: "角色编号", width: 1, align: 'center'},
            {field: "name", title: "角色名称", width: 1, align: 'center'}
        ]]
    });
    roleDialog.dialog({
        width: 700,
        height: 450,
        buttons: "#role_dialog_bt",
        closed: true
    });
    allPermission.datagrid({
        width:300,
        height: 300,
        title: "所有权限",
        fitColumns: true,
        rownumbers: true,
        pagination:true,
        url:"/permission_list",
        singleSelect: true,
        onDblClickRow:function(rowIndex,rowData){
            var selfSelectedRows=selfPermission.datagrid("getRows");
            var flag=false;
            var index=-1;
            for (let i = 0; i < selfSelectedRows.length; i++) {
                if(selfSelectedRows[i].id==rowData.id){
                    flag=true;
                    index=i;
                    break;
                }
            }
            //如果右边有了,就选中
            if(flag){
                selfPermission.datagrid('selectRow',index);
            }else{
                //如果右边没有,左边就添加到一遍
                selfPermission.datagrid('appendRow',rowData);
            }

        },
        columns: [[
            {field: "name", title: "权限名称", width: 1, align: 'center'}
        ]]
    });
    //把左边的表格的分页组件拿到，然后设置它的属性
    var pager = allPermission.datagrid("getPager");
    pager.pagination({
        showPageList:false,
        showRefresh:false,
        displayMsg:''
    });

    selfPermission.datagrid({
        width:300,
        height: 300,
        title: "已有权限",
        fitColumns: true,
        rownumbers: true,
        singleSelect: true,
        onDblClickRow:function(rowIndex,rowData){
            selfPermission.datagrid("deleteRow",rowIndex);
        },
        columns: [[
            {field: "name", title: "权限名称", width: 1, align: 'center'}
        ]]
    });


    var cmdObj = {
        add: function () {
            roleDialog.dialog("open");
            roleDialog.dialog("setTitle", "新增");
            roleIdNameSn.val("");//不能清空整个表，清空部分就可以了
            //把右边的选中的权限表datagrid清空
            selfPermission.datagrid("loadData",[]);
            // roleForm.form("clear");
        },
        save: function () {
            var idVal = roleFormId.val();
            var url;
            if (idVal) {
                url = "/role_update";
            } else {
                url = "/role_save";
            }
            roleForm.form("submit", {
                url: url,
                //这里可以在ajax请求里面添加额外的参数
                onSubmit:  function (param) {
                    // param["permissions[0].id"]='1';//这个是添加参数的格式
                    //获取选中的权限的数据(主要要的是id)
                    var rows=selfPermission.datagrid("getRows");
                    for (let i = 0; i < rows.length; i++) {
                        param["permissions["+i+"].id"]=rows[i].id;
                    }
                },
                success: function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        //关闭对话框
                        roleDialog.dialog("close");
                        //刷新数据表格
                        roleDatagrid.datagrid("load");
                        //把右边的选中的权限表datagrid清空
                        selfPermission.datagrid("loadData",[]);
                    } else {
                        $.messager.alert("温馨提示" + data.msg, "info");
                    }

                }
            })
        },
        edit: function () {
            //拿到选定的数据
            var rowData = roleDatagrid.datagrid('getSelected');
            if (rowData) {
                roleIdNameSn.val("");//不能清空整个表，清空部分就可以了
                roleDialog.dialog("open");
                roleDialog.dialog("setTitle", "编辑");
                //************************这里要发一个ajax请求给后台,查询当前角色拥有的权限,难点************************
                var options=selfPermission.datagrid("options");
                console.log(options);
                options.url="/permission_queryByRid";
                selfPermission.datagrid("load",{
                    rid:rowData.id
                });
                //基于同名匹配原则,回显角色名称和角色编号
                roleForm.form("load", rowData);
            } else {
                $.messager.alert("温馨提示", "请选择一条需要编辑的数据", "info")
            }
        },
        delrole: function () {
            //拿到选定的数据
            var rowData = roleDatagrid.datagrid('getSelected');
            if (rowData) {
                //再次确认
                $.messager.confirm("温馨提示", "您确定该员工要离职", function (yes) {
                    if (yes) {
                        $.get("/role_delete?id=" + rowData.id, function (data) {
                            if (data.success) {
                                $.messager.alert("温馨提示", data.msg, "info", function () {
                                    //刷新数据表格
                                    roleDatagrid.datagrid("reload");
                                })
                            } else {
                                $.messager.alert("温馨提示", data.msg, "info")
                            }
                        }, "json")
                    }
                })
                //向后台发送ajax请求

                //根据请求的结果进行提示

            } else {
                $.messager.alert("温馨提示", "请选择一条需要删除的数据", "info")
            }
        },
        reload: function () {
            roleDatagrid.datagrid("reload");
        },

        cancel: function () {
            roleDialog.dialog("close");
            //把datagrid数据清空
            selfPermission.datagrid("loadData",[]);
        },

        searchrole: function () {
            var value = keyWord.val();
            //重新加载数据,并进行ajax传参
            roleDatagrid.datagrid("load", {
                keyWord: value
            });
        }
    };
    /*对有data-cmd这个属性的a标签进行监听*/
    $("a[data-cmd]").on("click",function () {
        //<a data-cmd="save">
        var cmd = $(this).data("cmd");//save
        //如果有这个值,就调取对应的方法
        if(cmd){
            cmdObj[cmd]();//为什么要有括号呢
        }

    });
});

/*
function deptFormatter(value, record, index) {
    return value ? value.name : "";
}

function stateFormatter(value, record, index) {
    return value ? "<font color='green'>正常</font>" : "<font color='red'>离职</font>";
}

function adminFormatter(value, record, index) {
    return value ? "<font color='red'>管理员</font>" : "普通用户";
}
*/
